<template>
  <div class="nav-menu">
    <el-menu
      :collapse-transition="false"
      :collapse="isCollapse"
      router
      :default-active="`/${this.$route.path.split('/')[1]}`"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <div class="show-nav" @click="handleClick">
        <i class="iconfont daohang-icon" style="padding-right:0;" :class="!isCollapse?'iconfont icon-daohangshouqi':'iconfont icon-daohangzhankai'"></i>
      </div>
      <el-menu-item :key="i" v-for="(item,i) in routeList" :index="item.route">
        <i :class="item.icon"></i>
        <span slot="title">{{item.name}}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: 'navMenu',
  data () {
    return {
      isCollapse: false,
      routeList: [
        { name: '充值管理',
          icon: 'iconfont icon-ziyuan',
          route: '/rechargeRecord'
        },
        { name: '订单管理',
          icon: 'iconfont icon-dingdan',
          route: '/orderManage'
        },
        { name: '代理管理',
          icon: 'iconfont icon-agency-management',
          route: '/agencyManage'
        },
        { name: '赛果管理',
          icon: 'iconfont icon-saiguoguanli',
          route: '/resManage'
        },
        { name: '报表管理',
          icon: 'iconfont icon--baobiaoguanli',
          route: '/reportManage'
        },
        { name: '会员管理',
          icon: 'iconfont icon-huiyuanguanli1',
          route: '/memberManage'
        },
        { name: '提款管理',
          icon: 'iconfont icon-tikuan',
          route: '/drawManage'
        },
        { name: '存款管理',
          icon: 'iconfont icon-cunkuan',
          route: '/depositManage'
        },
        { name: '公告管理',
          icon: 'iconfont icon-notice',
          route: '/noticeManage'
        },
        { name: '活动中心',
          icon: 'iconfont icon-huodongzhongxin',
          route: '/activityCenter'
        },
        { name: 'APP版本管理',
          icon: 'iconfont icon-banbengengxin',
          route: '/versionManage'
        }
      ]
    }
  },
  methods: {
    handleClick () {
      this.isCollapse = !this.isCollapse
      this.$emit('isCollapse', this.isCollapse)
    }
  }
}
</script>
<style lang="less">
  .nav-menu {
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    .el-menu i {
      color: #ffffff;
      font-size: 20px;
      padding-right: 10px;
    }
    .show-nav {
      cursor: pointer;
      color: #ffffff;
      height: 56px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .show-nav:hover {
      background: rgb(67, 74, 80);
    }
  }
</style>
